import * as React from 'react';
import { Input, Form, Button } from 'antd';

const FormItem = Form.Item;

interface EditFormProps {
  onSubmit: (data: Record<string, any>) => any;
  loading: boolean;
  tpl: any;
  form: any;
}

class EditForm extends React.Component<EditFormProps> {
  handleSubmit = (e: any) => {
    e.preventDefault();

    this.props.form.validateFields((err: any, values: any) => {
      if (err) return;

      this.props.onSubmit(values);
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { tpl, loading } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };

    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem {...formItemLayout} label="名称">
          {getFieldDecorator('name', {
            rules: [
              {
                required: true,
                message: '模板名称是必填项',
              },
            ],
            initialValue: tpl ? tpl.name : null,
          })(<Input placeholder="模板名称" disabled={Boolean(tpl)} />)}
        </FormItem>
        <FormItem {...formItemLayout} label="描述">
          {getFieldDecorator('description', {
            rules: [
              {
                required: true,
                message: '模板描述是必选项',
              },
            ],
            initialValue: tpl ? tpl.description : null,
          })(<Input placeholder="模板描述" />)}
        </FormItem>

        <FormItem {...tailFormItemLayout}>
          <Button icon="save" loading={loading} type="primary" htmlType="submit" size="large">
            提交
          </Button>
        </FormItem>
      </Form>
    );
  }
}

export default Form.create()(EditForm);
